<template>
  <div class="app-container">
    <el-tabs  :tab-position="tabPosition" @tab-click="getNewestData()" v-model="queryParams.facId" style="height: 100%;">
      <el-tab-pane style=" font-size: 12px;background-color: #2ea747;font-weight:bold;" v-for="(item,index) in facList"
                   :key="index"
                   :label="item.facName"
                   :name="item.facId+''">设备编号：{{item.facId}} 更新时间：{{newData.dataTime}}
      </el-tab-pane>

      <div class="element-container" :data="newData" style="display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;">
        <div class="el-card__body"  :style="{'background':e1Background}" style="margin: 10px; display: flex; width: 200px; padding-top: 20px; border: 4px solid #ebeef5;border-radius: 17px;">
          <div>
            <img src="http://47.105.215.208:8081/images/onstage/element/108.png" class="image">
          </div>
          <div  style="width: 200px; text-align: center; color: white;">
            <span  class="element-name">风速
            </span>
            <div  class="element-data1">
              {{newData.e1}} m/s
              <div>3级</div>
            </div>
          </div>
        </div>
        <div class="el-card__body" :style="{'background':e2Background}" style="margin: 10px;display: flex; width: 200px; padding-top: 20px; border: 4px solid #ebeef5;border-radius: 17px;">
          <div >
            <img  src="http://47.105.215.208:8081/images/onstage/element/104.png" class="image">
          </div>
          <div style="width: 200px; text-align: center; color: white;">
            <span  class="element-name">雨量
            </span>
            <div  class="element-data1">
              {{newData.e2}} mm
            </div>
          </div>
        </div>
        <div class="el-card__body" :style="{'background':e3Background}" style=" margin: 10px;display: flex; width: 200px; padding-top: 20px; border: 4px solid #ebeef5;border-radius: 17px;">
          <div>
            <img  src="http://47.105.215.208:8081/images/onstage/element/101.png" class="image">
          </div>
          <div style="width: 200px; text-align: center; color: white;">
            <span class="element-name">大气温度
            </span>
            <div class="element-data1">
              {{newData.e3}} ℃
            </div>
          </div>
        </div>
        <div class="el-card__body" :style="{'background':e4Background}" style="margin: 10px;display: flex; width: 200px; padding-top: 20px; border: 4px solid #ebeef5;border-radius: 17px;">
          <div>
            <img  src="http://47.105.215.208:8081/images/onstage/element/115.png" class="image">
          </div>
          <div style="width: 200px; text-align: center; color: white;">
            <span class="element-name">雨量累计
            </span>
            <div class="element-data1">
              {{newData.e4}} mm
            </div>
          </div>
        </div>
        <div class="el-card__body" :style="{'background':e5Background}" style=" margin: 10px;display: flex; width: 200px; padding-top: 20px; border: 4px solid #ebeef5;border-radius: 17px;">
          <div>
            <img  src="http://47.105.215.208:8081/images/onstage/element/110.png" class="image">
          </div>
          <div style="width: 200px; text-align: center; color: white;">
            <span class="element-name">液位
            </span>
            <div class="element-data1">
              {{newData.e5}} mm
            </div>
          </div>
        </div>
        <div class="el-card__body" :style="{'background':e6Background}" style=" margin: 10px;display: flex; width: 200px; padding-top: 20px; border: 4px solid #ebeef5;border-radius: 17px;">
          <div>
            <img  src="http://47.105.215.208:8081/images/onstage/element/110.png" class="image">
          </div>
          <div style="width: 200px; text-align: center; color: white;">
            <span class="element-name">蒸发
            </span>
            <div class="element-data1">
              {{newData.e6}} mm
            </div>
          </div>
        </div>
        <div class="el-card__body" :style="{'background':e7Background}" style=" margin: 10px;display: flex; width: 200px; padding-top: 20px; border: 4px solid #ebeef5;border-radius: 17px;">
          <div>
            <img  src="http://47.105.215.208:8081/images/onstage/element/109.png" class="image">
          </div>
          <div style="width: 200px; text-align: center; color: white;">
            <span class="element-name">风向
            </span>
            <div class="element-data1">
              {{newData.e7}} °
            </div>
          </div>
        </div>
        <div class="el-card__body" :style="{'background':e8Background}" style=" margin: 10px;display: flex; width: 200px; padding-top: 20px; border: 4px solid #ebeef5;border-radius: 17px;">
          <div>
            <img  src="http://47.105.215.208:8081/images/onstage/element/134.png" class="image">
          </div>
          <div style="width: 200px; text-align: center; color: white;">
            <span class="element-name">总辐
            </span>
            <div class="element-data1">
              {{newData.e8}} W/m2
            </div>
          </div>
        </div>
        <div class="el-card__body" :style="{'background':e9Background}" style=" margin: 10px;display: flex; width: 200px; padding-top: 20px; border: 4px solid #ebeef5;border-radius: 17px;">
          <div>
            <img  src="http://47.105.215.208:8081/images/onstage/element/116.png" class="image">
          </div>
          <div style="width: 200px; text-align: center; color: white;">
            <span class="element-name">辐射累计
            </span>
            <div class="element-data1">
              {{newData.e9}} MJ/m2
            </div>
          </div>
        </div>
        <div class="el-card__body" :style="{'background':e10Background}" style=" margin: 10px;display: flex; width: 200px; padding-top: 20px; border: 4px solid #ebeef5;border-radius: 17px;">
          <div>
            <img  src="http://47.105.215.208:8081/images/onstage/element/112.png" class="image">
          </div>
          <div style="width: 200px; text-align: center; color: white;">
            <span class="element-name">照度
            </span>
            <div class="element-data1">
              {{newData.e10}} Lux
            </div>
          </div>
        </div>
        <div class="el-card__body" :style="{'background':e11Background}" style=" margin: 10px;display: flex; width: 200px; padding-top: 20px; border: 4px solid #ebeef5;border-radius: 17px;">
          <div>
            <img  src="http://47.105.215.208:8081/images/onstage/element/102.png" class="image">
          </div>
          <div style="width: 200px; text-align: center; color: white;">
            <span class="element-name">大气湿度
            </span>
            <div class="element-data1">
              {{newData.e11}} %RH
            </div>
          </div>
        </div>
        <div class="el-card__body" :style="{'background':e12Background}" style=" margin: 10px;display: flex; width: 200px; padding-top: 20px; border: 4px solid #ebeef5;border-radius: 17px;">
          <div>
            <img  src="http://47.105.215.208:8081/images/onstage/element/127.png" class="image">
          </div>
          <div style="width: 200px; text-align: center; color: white;">
            <span class="element-name">数字气压
            </span>
            <div class="element-data1">
              {{newData.e12}} hPa
            </div>
          </div>
        </div>
        <div class="el-card__body" :style="{'background':e13Background}" style=" margin: 10px;display: flex; width: 200px; padding-top: 20px; border: 4px solid #ebeef5;border-radius: 17px;">
          <div>
            <img  src="http://47.105.215.208:8081/images/onstage/element/120.png" class="image">
          </div>
          <div style="width: 200px; text-align: center; color: white;">
            <span class="element-name">二氧化碳
            </span>
            <div class="element-data1">
              {{newData.e13}} PPM
            </div>
          </div>
        </div>
      </div>

      <div  class="device-information" style="width: 300px;max-height: 600px;margin-right: 10px;min-width: 300px;">
        <div class="el-card device-cover is-always-shadow">
          <div class="el-card__body" style="padding: 0px;">
            <div  style="display: flex; padding-left: 0px; justify-content: space-between;">
              <el-tab-pane  v-for="(item,index) in facList"
                    :key="index"
                    :label="item.facName"
                    :name="item.facId+''">
                <img  style=" width: 300px;height: 360px;" :src="item.coverUrl">
                <div  style="text-align: left;">
                    设备名称： {{item.facName}}
                </div>
                <div style="text-align: left;">
                  设备ID号: {{ item.facId}}
                </div>
                <div  style="text-align: left;">
                  物联网卡: {{ item.sim}}
                </div>
              </el-tab-pane>
            </div>
          </div>
        </div>
      </div>




    </el-tabs>






  </div>
</template>

<script>
import {newestData} from "@/api/system/weather";
import {listDevice} from "@/api/system/device";

export default {
  name: "Preview",
  data() {
    return {
      //设备列表
      facList: [],
      //最新数据
      newData:null,

      background:['#e74e4e', '#6c117b', 'rgb(219,170,209)',
        'rgb(42,75,165)', '#009393', '#bbffbb','rgb(232,90,23)',
        'rgb(47, 233, 27)','rgb(163, 16, 135)','rgb(3,5,54)',
        'rgb(42,75,165)','rgb(16,163,65)','rgb(7,46,238)',
        'rgb(193,83,39)','rgb(36,58,170)', '#3232e7',
      ],
      e1Background:'rgb(163, 16, 135)',e2Background:'rgb(25, 16, 160)', e3Background:'rgb(42,75,165)', e4Background:'rgb(16,163,65)',
      e5Background:'rgb(193,83,39)', e6Background:'rgb(36,58,170)',e7Background:'rgb(8,11,16)', e8Background:'rgb(158,41,74)',
      e9Background:'rgb(117,179,73)',e10Background:'rgb(219,170,209)', e11Background:'rgb(232,90,23)', e12Background:'rgb(7,46,238)',
      e13Background:'rgb(163, 16, 135)',

      //标签页
      tabPosition: 'left',
      facParams:{
        facId: null,  //设备编号
        facName:null, //设备名称
        latitude:null,  //纬度
        longitude:null, //经度
        coverUrl:null,  //图片链接
        sim:null  // 物联网卡号
      },
      // 查询参数
      queryParams: {
        facId: null,
      },
    };
  },
  created() {
    this.getFacList();
    this.setTime();
  },
  methods: {
    /*获取设备列表*/
    getFacList(){
      listDevice(this.facParams).then(response => {
        this.facList = response.rows;
        /*查询了设备信息再查询第一条设备的数据*/
        this.queryParams.facId = this.facList[0].facId+'';
        console.log(this.queryParams.facId)
        this.getNewestData();
      });
    },
    /*获取最新数据*/
    getNewestData(){
      newestData(this.queryParams).then(response => {
        this.newData = null;
        this.newData = response.data;
        this.saveColor();
      });
    },

    /*定时任务*/
    setTime() {
      //每隔10s运行一次保存方法\n
      this.timer = setInterval(() => {
        this.saveColor();
        this.getNewestData();
      }, 60000)
    },
    /*随机选择颜色方法*/
   saveColor(){
      //var math = Math.floor(Math.random() * this.background.length); // 获取随机数
      this.e1Background = this.background[Math.floor(Math.random() * this.background.length)];
      this.e2Background = this.background[Math.floor(Math.random() * this.background.length)];
      this.e3Background = this.background[Math.floor(Math.random() * this.background.length)];
      this.e4Background = this.background[Math.floor(Math.random() * this.background.length)];
      this.e5Background = this.background[Math.floor(Math.random() * this.background.length)];
      this.e6Background = this.background[Math.floor(Math.random() * this.background.length)];
      this.e7Background = this.background[Math.floor(Math.random() * this.background.length)];
      this.e8Background = this.background[Math.floor(Math.random() * this.background.length)];
      this.e9Background = this.background[Math.floor(Math.random() * this.background.length)];
      this.e10Background = this.background[Math.floor(Math.random() * this.background.length)];
      this.e11Background = this.background[Math.floor(Math.random() * this.background.length)];
      this.e12Background = this.background[Math.floor(Math.random() * this.background.length)];
      this.e13Background = this.background[Math.floor(Math.random() * this.background.length)];
      this.e14Background = this.background[Math.floor(Math.random() * this.background.length)];
    }
  }
};
</script>
